<template>
	<div id="shopDetail">
		<x-header :left-options="{showBack: false}" title="店铺详情" class="header vux-1px-b">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="contenter">
			<div class="head">
				<div class="title_con">
					<div class="portrait">
						<img :src="'/los/uploads/thumb/shop/' + storeMate.shop_id + '_72X72.jpeg'" class="pimg" />
					</div>
					<div class="store_title">
						<span class="shop_name">{{storeMate.shop_name}}</span>
						<img src="../assets/images/home/icon_identify_logo.png" alt="" />
						<span class="shop_time">{{addTime}}入驻拍卖平台</span>
						<div class="focus">
							<button class="btn_focus">关注</button>
							<span class="focus_num">{{storeMate.shop_follow_num}}人</span>
						</div>
					</div>
				</div>
				<div class="lots_msg">
					<ul>
						<li class="msgg">
							<span class="one">{{storeMate.auction_count}}</span><br />
							<span class="two">拍品</span>
						</li>
						<li class="msgg">
							<span class="one">52</span><br />
							<span class="two">成交</span>
						</li>
						<li class="msgg">
							<span class="one">{{storeMate.shop_vcount}}</span><br />
							<span class="two">访客</span>
						</li>
						<li class="cards">
							<img src="../assets/images/home/defaultImg.jpg" alt="" />
							<!--<img class="shop_qcorde" src="../../dist/static/images/icon_logo.png" />-->
							<span class="two">店铺名片</span>
						</li>
					</ul>
				</div>
			</div>
			<div class="content">
				<div class="store_content">
					<span class="store_title">店铺简介</span>
					<div class="introduce">
						<p>作为一位文学史和艺术史的学者和教师，我觉得写一本大师评传是个人义不容辞的责任。追溯并体味每一位大师的生命历程、情感天地和卓越创造。 作为一位文学史和艺术史的学者和教师，我觉得写一本大师评传是个人义不容辞的责任。追溯并体味每一位大师的生命历程、情感天地和卓越创造。 作为一位文学史和艺术史的学者和教师，我觉得写一本大师评传是个人义不容辞的责任。追溯并体味每一位大师的生命历程、情感天地和卓越创造。
						</p>
					</div>
				</div>
			</div>
			<div class="footer">
				<ul>
					<li class="store_img" v-for="item in auctionList">
						<img :src="'/los/uploads/thumb/goods/' + item.goods_id  + '_172X207.jpeg'" class="img" />
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import { XHeader } from 'vux'
	export default {
		data() {
			return {
				storeMate: '',
				auctionList: [],
				addTime: ''
			}
		},
		name: "shopMsg",
		components: {
			XHeader
		},
		mounted() {
			this.getShopMate();
			this.getAuctionList();
			//将时间戳转换成日期的封装函数
			Date.prototype.Format = function(fmt) {
				var o = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate(),
					"h+": this.getHours(),
					"m+": this.getMinutes(),
					"s+": this.getSeconds(),
					"q+": Math.floor((this.getMonth() + 3) / 3),
					"S": this.getMilliseconds()
				};
				if(/(y+)/.test(fmt))
					fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				for(var k in o)
					if(new RegExp("(" + k + ")").test(fmt))
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			}
		},
		methods: {
			//获取店铺资料
			getShopMate: function() {
				//				let shop_id = this.$route.params.id;
				this.$http({
					method: 'GET',
					url: '/los/api/shop/details.json?shop_id=204',
					data: ''
				}).then((result) => {
					this.storeMate = result.data.data;
					this.addTime = this.timer2time(this.storeMate.add_time);
				}).catch((err) => {
					console.log(err);
				})
			},

			getAuctionList: function() {
				//				let shop_id = this.$route.params.id;
				this.$http({
					method: 'GET',
					url: '/los/api/shop/auction_list.json?shop_id=204',
					data: ''
				}).then((result) => {
					this.auctionList = result.data.data;
				}).catch((err) => {
					console.log(err);
				})
			},
			//将时间戳转换成日期
			timer2time: function(time) {
				return new Date(parseInt(time) * 1000).Format("yyyy-MM-dd");
			},
			back() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped lang='less'>
	.shopContainer {
		background: #fff;
	}
	
	.header {
		background: #fff;
		height: 1.17rem;
	}
	
	.contenter {
		background: #fff;
	}
	
	.head {
		.title_con {
			padding: 0.46rem 0.26rem;
			position: relative;
			height: 2.52rem;
			.portrait {
				width: 1.57rem;
				height: 1.57rem;
				float: left;
				.pimg {
					width: 100%;
					height: 100%;
				}
			}
			.store_title {
				width: 7.52rem;
				float: right;
				margin-top: 0.18rem;
				.shop_name {
					font-size: 0.42rem;
					color: #333333;
					float: left;
				}
				img {
					margin-left: 0.13rem;
					width: 0.32rem;
					height: 0.37rem;
					margin-top: 0.13rem;
				}
				.shop_time {
					display: block;
					font-size: 0.37rem;
					color: #AAAAAA;
					margin-top: 0.32rem;
				}
				.focus {
					width: 1.6rem;
					height: 1.62rem;
					border: 1px solid #fff;
					position: absolute;
					right: 0.26rem;
					top: 0.44rem;
					.btn_focus {
						width: 100%;
						height: 0.81rem;
						border: none;
						border-top-left-radius: 0.12rem;
						border-top-right-radius: 0.12rem;
						background-color: #da4240;
						color: #fff;
					}
					.focus_num {
						font-size: 0.32rem;
						color: #777777;
						width: 100%;
						height: 0.81rem;
						display: inline-block;
						text-align: center;
						padding: 7px 0;
						background: #f3f3f3;
						border-bottom-left-radius: 0.12rem;
						border-bottom-right-radius: 0.12rem;
					}
				}
			}
		}
		.lots_msg {
			width: 100%;
			height: 1.54rem;
			clear: both;
			.msgg {
				float: left;
				height: 1.54rem;
				width: 2.1rem;
				padding: 0.34rem 0.53rem 0.37rem 0.42rem;
				text-align: center;
				.one {
					color: #333333;
					font-size: 0.37rem;
				}
				.two {
					color: #777777;
					font-size: 0.32rem;
				}
			}
			.cards {
				height: 1.54rem;
				width: 2.6rem;
				float: right;
				position: relative;
				.shop_qcorde {
					width: 0.8rem;
					height: 0.8rem;
					position: absolute;
					top: 50%;
					margin-top: -0.4rem;
				}
				.two {
					position: absolute;
					left: 1rem;
					display: inline-block;
					height: 0.5rem;
					font-size: 0.32rem;
					top: 505;
					top: 50%;
					margin-top: -0.25rem;
				}
			}
		}
	}
	
	.content {
		padding: 0.48rem 0.26rem;
		overflow: hidden;
		position: relative;
		.store_title {
			width: 0.8rem;
			font-size: 0.37rem;
			color: #333333;
			text-align: center;
			float: left;
		}
		.introduce {
			width: 86%;
			overflow: hidden;
			font-size: 0.37rem;
			float: left;
			margin-left: 0.4rem;
			color: #777777;
		}
	}
	/*细线追加样式*/
	
	.content:before {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		width: 186%;
		margin-left: 0.4rem;
		height: 1px;
		border-top: 1px solid #f3f3f3;
		transform-origin: 0 0;
		transform: scaleX(0.5);
	}
	
	.footer {
		padding: 0.13rem 0.26rem;
		overflow: hidden;
		ul {
			/*padding: 0.74rem 0.26rem 0 0.26rem;*/
			.store_img {
				width: 3.12rem;
				height: 3.12rem;
				float: left;
				margin: 0 0.06rem 0.06rem 0;
				border-radius: 0.08rem;
				.img {
					width: 100%;
					height: 100%;
				}
			}
			.store_img:nth-child(3n) {
				margin-right: 0;
			}
		}
	}
</style>